<template>
  <div class="edit-api">
    <common-breadcrumb :crumb="crubm"></common-breadcrumb>
    <el-card>
      <el-form
        :model="apiDetailForms"
        :rules="apiDetailFormsRules"
        ref="apiDetailFormsRef"
        label-width="100px"
      >
        <el-form-item label="项目名称">
          <el-select v-model="apiDetailForms.project_id" placeholder="请选择项目">
           <el-option
              v-for="item in projectList" :key="item.id"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="api描述">
          <el-input v-model="apiDetailForms.request_desc"></el-input>
        </el-form-item>
        <el-form-item label="请求路径">
          <el-input v-model="apiDetailForms.request_url"></el-input>
        </el-form-item>
        <el-form-item label="请求方法">
          <el-select v-model="apiDetailForms.request_methods" placeholder="请选请求方法">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
            <el-option label="PATCH" value="PATCH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-button type="primary" size="mini">添加参数</el-button>
        </el-form-item>
        <el-form-item label="返回示例">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 20 }"
            v-model="apiDetailForms.response_json"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10}"
            v-model="apiDetailForms.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  components: {
    commonBreadcrumb
  },
  data () {
    return {
      crubm: ['管理', '编辑api'],
      apiDetailForms: {},
      projectList: [],
      apiDetailFormsRules: {}
    }
  },
  created () {
    this.getApiDetail()
  },
  methods: {
    async getApiDetail () {
      const { id } = this.$route.params
      const { data: res } = await this.$axios.get(`api/${id}`)
      if (res.code === 1) {
        this.apiDetailForms = res.result
      }
      const { data: projectList } = await this.$axios.get('allprojects')
      this.projectList = projectList.result
    }
  }
}
</script>

<style>
</style>
